<%@ page import="java.util.List" %>
<%@ page import="com.pochogastos.model.Categoria" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="head.jsp"></jsp:include>
<link rel="stylesheet" href="css/gasto.css" type="text/css" media="screen" />
<link href="css/datepicker.css" rel="stylesheet"  type="text/css" media="screen" />
</head>
<body>
<jsp:include page="navbar.jsp"></jsp:include>

    <div id="gasto">
        <div class="container">
            <div class="section_header">
                <h3>Nuevo Gasto</h3>
            </div>
            <div class="row gasto">
                <p>Ingrese el nuevo gasto.</p>
				<% if(request.getAttribute("IDGASTO") != null){ %>
				      <p>Gasto ingresado OK. ID: <%=request.getAttribute("IDGASTO").toString() %></p>
			    <% } %>
                <form action="AgregarGasto" method="post" id="gastos-form">
                    <div class="row form">
                        <div class="span12 box">
                        	<input type="hidden" id="accion" name="accion" value="agregar"/>
                        	<input type="text" value="" class="descripcion" id="descripcion" name="descripcion" placeholder="Descripcion" required/>
                        	<select id="selectCategoria" name="selectCategoria"  required>
                        	<option value="">- Elija categor&iacute;a -</option>
	                        	<% List<Categoria> listaCategorias = (List<Categoria>)session.getAttribute("categorias"); 
	                        		for(Categoria c : listaCategorias){
	                        	%>
	                        	<option value="<%=c.getId()%>"><%=c.getNombre()%></option>
	                        <% } %>
                        	</select>
                        	<a href="#myModal" role="button" class="btn btn-success btn-mini" data-toggle="modal">Agregar Categor&iacute;a</a>
                        	<input type="text" value="" class="fecha" id="fecha" name="fecha" placeholder="Fecha Gasto" required/>
                        	<input type="number" value=""  step="any" class="categoria" id="monto" name="monto" placeholder="Monto" required/>
                        </div>
                    </div>

                    <div class="row submit">
                        <div class="span8 right">
                            <input type="submit" value="Ingresar Gasto">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

	<jsp:include page="footer.jsp"></jsp:include>
	
	
	<!-- Modal -->
	<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
	    <h3 id="myModalLabel">Agregar Categor&iacute;a</h3>
	  </div>
	  <div class="modal-body">
	    <fieldset>
	    <form action="" id="CategoriaForm">
	    	<input type="text" value="" class="input-text m-wrap m-ctrl-large" id="categoriaDesc" name="categoriaDesc" placeholder="Nombre de Categoria" required/>
	    </form>
	    </fieldset>
	  </div>
	  <div class="modal-footer">
	    <button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true">Cerrar</button>
	    <button class="btn btn-primary" onclick="agregarCategoria();" >Guardar</button>
	  </div>
	</div>

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/theme.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/Placeholders.min.js"></script>
	<script>
		var checkout = $('#fecha').datepicker({format: 'dd-mm-yyyy'}).on('changeDate', function(ev){checkout.hide();}).data('datepicker');
		function agregarCategoria(){
			  if($("#categoriaDesc").val()!=''){
				  $.post("AgregarCategoria", 
						  { "categoria": $("#categoriaDesc").val() },
					  function(data){
						if(data && data.id != -1){
							$("#selectCategoria").append($('<option></option>').val(data.id).html(data.nombre));
							$("#selectCategoria").val(data.id);
							$('#myModal').modal('hide');
					  	}
					  }, "json");
			  }else{
				  $('#myModal').modal('hide');
				  alert("Nombre Categoria incompleto");
			  }
		  }
	</script>
	
</body>
</html>